<template>
    <d2-container class="warning-header">

        <el-card>
            <el-row :gutter="20">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="巡查项分类" style="padding-left: 30px">
                        <el-select v-model="formInline.inspectTypeName" placeholder="请选择巡查项分类" style="width:200px">
                            <el-option v-for="item in inspectItems" :key="item.Id" :label="item.name" :value=item.Id></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="巡查项名称" style="padding-left: 30px">
                        <el-input v-model="formInline.inspectItem" placeholder="" style="width:140px">
                        </el-input>
                    </el-form-item>
                    <el-form-item style="padding-left: 30px">
                        <el-button size="mini" round   @click="onSubmitSearch" type="primary" >
                            搜索
                        </el-button>
                        <el-button size="mini" round  type="primary" @click="handleNew">
                            增加
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-row>

        </el-card>
        <br/>


        <el-card>
            <el-table
                    :data="tableData.data"
                    :stripe="true"
                    :border="true"
                    tooltip-effect="dark"
                    style="width: 100%">
                <el-table-column prop="inspectItem" label="巡查项名称" align="center">
                </el-table-column>
                <el-table-column prop="inspectGroupName" label="巡查项分组" align="center">
                </el-table-column>
                <el-table-column prop="inspectTypeName" label="巡查项类型" align="center">
                </el-table-column>
                <el-table-column prop="isPublic" label="是否公共项" align="center">
                </el-table-column>
                <el-table-column prop="desc" label="描述" align="center">
                </el-table-column>
                <el-table-column label="操作" fixed="right" align="center">
                    <template slot-scope="scope" >

                        <el-button    size="mini" round icon="el-icon-edit" align="center" type="primary" v-if="scope.row.isPublic == '是'  " disabled   >编辑
                        </el-button>
                        <el-button    size="mini" round icon="el-icon-edit" align="center" type="primary" v-else    @click="handleEditClick(scope.$index,scope.row)"  >编辑
                        </el-button>
                        <el-button   size="mini" round icon="el-icon-delete"   align="center" type="danger" v-if="scope.row.isPublic  == '是'  " disabled >删除
                        </el-button>
                        <el-button   size="mini" round icon="el-icon-delete"   align="center" type="danger"  v-else  @click="handleDeleteClick(scope.$index,scope.row)" >删除
                        </el-button>


                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <!--分页操作 -->

        <template slot="footer">
            <div class="block">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="currentPage"
                        layout="prev, pager, next, jumper"
                        :total="tableData.total">
                </el-pagination>
            </div>
        </template>
        <!-- 编辑弹出处理页面-->
        <el-dialog
                title="任务详情"
                :visible.sync="editFormVisible"
                width="35%"
                :before-close="handleClose">
            <el-card>
                <el-form :inline="true" :model="detailData" class="demo-form-inline" ref="detailData">
                    <el-form-item label="巡查项名称" prop="inspectItem">
                        <el-input v-model="detailData.inspectItem" auto-complete="off" placeholder="请输入巡查项名称"></el-input>
                    </el-form-item>

                    <el-form-item label="是否公共项" prop="isPublic">
                        <el-select v-model="detailData.isPublic" placeholder="是">
                            <el-option label="是" value=1></el-option>
                            <el-option label="否" value=0></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="巡查项分类" prop="inspectType" >
                    <el-select v-model="detailData.inspectType" placeholder="请选择巡查项类型" style="width: 180px"   @change="onInspectTypeSelect()">
                        <el-option v-for="item in inspectItems" :key="item.Id" :label="item.name" :value=item.Id></el-option>
                    </el-select>
                </el-form-item>
                    <el-form-item label="巡查项分组" prop="inspectGroup">
                        <el-select v-model="detailData.inspectGroup" placeholder="请选择巡查项分组">
                            <el-option v-for="item in groupListItems" :key="item.Id" :label="item.name" :value=item.Id ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="描述" prop="desc">
                        <el-input v-model="detailData.desc" auto-complete="off" placeholder="请输入巡查项名称"
                                  style="width:480px;padding-left: 38px"></el-input>
                    </el-form-item>
                </el-form>
            </el-card>
            <br/>
            <span slot="footer" class="dialog-footer">
                 <el-button type="primary" @click="submitNew('detailData')" style="text-align: center">保存</el-button>
                    <el-button style="text-align: center" @click="editFormVisible = false" >取消</el-button>
            </span>
        </el-dialog>
    </d2-container>
</template>
<script>

    import {getInspectItemsList,submitInspectItems,getInspectTypeListItems, getInspectGroupListItems,deleteInspectItems} from "../../api/data/patrolConfig";
    export default {
        mounted() {
            let _this = this;
            this.handleWarningTable();
            this.handleSelectItems();
        },
        data() {
            return {
                project: null,
                currentPage: 1,
                formInline:{
                    inspectTypeName:'',
                    inspectItem:''
                },
                detailData:{
                    inspectItem:'',
                    inspectTypeName:'',
                    inspectType:'',
                    inspectGroup:'',
                    desc:'',
                    isPublic:''
                },
                inspectType:[],
                inspectItem:[],
                tableData: [],
                inspectItems:[],
                groupListItems:[],
                editFormVisible: false,
            }
        },
        methods: {
            handleSelectItems() {
                getInspectTypeListItems({}).then(res => {
                    this.inspectItems = res.data;
                })

                var data = {}
                data.inspectType = this.detailData.inspectType
                getInspectGroupListItems(data).then(res => {
                    for(var item of res.data){
                        item.Id  = ""+ item.Id
                    }
                    console.log(res.data)
                    this.groupListItems = res.data;
                })
            },
            onInspectTypeSelect(){
                console.log( this.detailData.inspectType)
                this.groupListItems = []
                var data = {}
                data.inspectType = this.detailData.inspectType
                getInspectGroupListItems(data).then(res => {
                    this.groupListItems = res.data;
                })
            },
            handleEditClick(index,data) {
                this.editFormVisible = true
                this.detailData = data
            },
            handleDeleteClick(index,data) {
                deleteInspectItems({},data.Id).then(res => {
                    if(res.state === 0){
                        this.$message({
                            message: '删除成功！',
                            type: 'success'
                        });
                        this.handleWarningTable(this.formInline, this.currentPage);
                    }else{
                        this.$message({
                            message: '删除失败！',
                            type: 'warning'
                        });
                    }
                })
            },
            handleWarningTable(data = {}, pageno) {
                data = Object.assign(data, {pageno: pageno, pagesize: 10});
                getInspectItemsList(data).then(res => {
                    for (var item of res.data) {
                        if(item.isPublic===1) {
                            item.isPublic = "是"
                        }else if(item.isPublic===0){
                             item.isPublic = "否"
                        }
                    }

                    this.tableData = res;
                })
            },

            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.handleWarningTable(this.formInline, val)
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            onSubmitSearch(){
                //this.project =  Object.assign(this.project, this.formInline);
                this.handleWarningTable(this.formInline, 1);
            },
            //增加巡查项
            handleNew : function (index, row) {
                this.editFormVisible = true;
            },
            //巡查点保存
            submitNew(detailData) {
                this.$refs[detailData].validate((valid) => {
                    if (valid) {
                        //this.detailData.projectNo=this.project.projectNo;
                        submitInspectItems(this.detailData).then(res => {
                            if(res.state === 0){
                                this.$message({
                                    message: '提交成功！',
                                    type: 'success'
                                });
                                this.editFormVisible = false;
                                this.handleWarningTable(this.formInline, this.currentPage);
                                this.$refs[detailData].resetFields();
                            }
                        })

                    } else {
                        this.$message({
                            message: '提交失败！',
                            type: 'error'
                        });
                        return false;
                    }
                });
            }


        }
    }
</script>
<style>
    .warning-header .d2-container-full__header {
        background: gainsboro !important;
    }

    .warning-header .d2-container-full__header {
        background: #1E9FFF !important;

    }

    .el-form-item__content {
        text-align: center;
    }

    .el-button {
        padding: 10px 30px;
        margin-right: 20px;
    }

    .el-form-item__label {
        margin-left: 5px;
    }

    .number1 {
        padding-left: 0px;
    }


</style>

